import React, { Component } from 'react'
import moment from 'moment'
import { Breadcrumb, DatePicker, Select, Input, Button, message } from 'antd'
import API from 'UTIL/libs/api'
import Editor from 'COMPONENT/wangEditor/wangEditor'
import './editor.less'

const Option = Select.Option
const dateFormat = 'YYYY/MM/DD'
const nowDate = new Date()

export default class Test extends Component {
  constructor(props) {
    super(props)
    this.state = {
      relDate: nowDate,
      infoTypes: []
    }
  }
  // 返回
  goBack() {
    this.props.history.goBack()
  }
  // 更改标题
  handleInput(e) {
    this.setState({
      title: e.target.value
    })
  }
  // 更改时间
  handleChange(val) {
    this.setState({
      relDate: moment(val).format()
    })
  }
  // 更改类型
  handleSelect(val) {
    this.setState({
      infoTypeId: val
    })
  }
  // 保存
  handlePreserve() {
    var { title, relDate, infoTypeId } = this.state
    var { id } = this.props.params
    var content = this.refs.editor.getEditorContext()
    if (id != 0) {
      API.callJson('/info/edt')({
        id: id,
        title: title,
        relDate: relDate,
        infoTypeId: infoTypeId,
        content: content
      }).then((data)=>{
        console.log(data)
        message.success('保存成功')
      }).catch((msg)=>{
        console.log(msg)
        message.error(msg)
      })
    } else {
      API.callJson('/info/add')({
        title: title,
        relDate: relDate,
        infoTypeId: infoTypeId,
        content: content
      }).then((data)=>{
        console.log(data)
        message.success('保存成功')
      }).catch((msg)=>{
        console.log(msg)
        message.error(msg)
      })
    }
  }
  // 获取消息类型
  componentDidMount() {
    var { id } = this.props.params
    if (id != 0) {
      API.getJson(`/info/behind-one?id=${id}`)()
      .then((data)=>{
        console.log(data)
        this.setState(data)
        this.refs.editor.setEditorContext(data.content)
      }).catch((msg)=>{
        console.log(msg)
      })
    }
    API.getJson('/info/info-type')()
    .then((data)=>{
      this.setState({
        infoTypes: data
      })
    }).catch((msg)=>{
      console.log(msg)
    })
  }
  render () {
    var { title, relDate, infoTypeId, infoTypes } = this.state
    return <div className="tederen-editor">
      <div className="tederen-breadcrumb-container">
        <Breadcrumb separator=">">
          <Breadcrumb.Item><a className="tederen-breadcrumb-title">第三方组件</a></Breadcrumb.Item>
          <Breadcrumb.Item><a >wangeditor</a></Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <div className="tederen-editor-form">
        <div className="tederen-editor-form-item">
          <div className="left-title">标题：</div>
          <div className="right-content">
            <Input value={title} onChange={this.handleInput.bind(this)}/>
          </div>
        </div>
        <div className="tederen-editor-form-item">
          <div className="left-title">生效时间：</div>
          <div className="right-content">
            <DatePicker defaultValue={moment(relDate, dateFormat)} format={dateFormat} onChange={this.handleChange.bind(this)}/>
          </div>
        </div>
        <div className="tederen-editor-form-item">
          <div className="left-title">类型：</div>
          <div className="right-content">
            <Select placeholder="选择类型" style={{width: 142}} onChange={this.handleSelect.bind(this)} value={infoTypeId}>
              {
                infoTypes.map((infoType, i)=>{
                  return <Option value={infoType.id}>{infoType.infoName}</Option>
                })
              }
            </Select>
          </div>
        </div>
        <div className="tederen-editor-form-item">
          <div className="left-title">正文：</div>
          <div className="right-content">
            <Editor id="t-w-editor" ref="editor" />
          </div>
        </div>
        <div className="tederen-editor-form-item">
          <div className="left-title"></div>
          <div className="right-content">
            <Button className="goback" onClick={this.goBack.bind(this)}>返回</Button>
            <Button className="preserve" type="primary" onClick={this.handlePreserve.bind(this)}>保存</Button>
          </div>
        </div>
      </div>
    </div>
  }
}
